Electron那些事08：通过preload让渲染进程支持nodejs

2023-11-09 08:37| 来源: 网络整理| 查看: 265

【前言】

标题有点长，本节想讲的是如何让渲染进程支持nodejs的能力，

Electron那些事04：进程通信_uikoo9的博客-CSDN博客

04章节讲过一种方式，通过设置如下的属性

本节要讲的是另一种方式，供参考

【非preload的方式】

在复述一下04章节讲的方式

1.主进程中，打开一个window的时候，设置这些属性

webPreferences.nodeIntegration = true; webPreferences.contextIsolation = false;

2.渲染进程中，直接使用electron，并修改webpack target属性

target: 'electron17.1-renderer',

优点：可以在渲染进程直接使用nodejs和electron能力

缺点：安全性降低，并且渲染进程不能单独调试

【preload的方式】

preload的方式是在打开窗口前先预加载一段脚本

1.不需要修改webPreferences中的nodeIntegration和contextIsolation属性

2.主进程中，打开窗口时添加preload脚本

3.主进程中，preload脚本中，将需要使用的electron或者nodejs能力注入

const { contextBridge, ipcRenderer } = require('electron') contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer);

例如上述代码，注入了ipcRenderer能力

4.渲染进程中，通过window.xxx使用注入的能力

'use strict'; // import { ipcRenderer } from 'electron'; // channel const channel = 'ipc-to-index'; /** * ipc to index */ export function ipcToIndex(){ window.ipcRenderer.send(channel); }

优点：安全性高，渲染进程项目可以单独调试部分功能

缺点：所有渲染进程想使用的能力，都需要通过preload脚本注入

非preload方式代码见：

https://github.com/insistime-guides/electron-guides/tree/0.2.6

preload方式代码见：

GitHub - insistime-guides/electron-guides at 0.2.7

实际开发中建议使用preload的方式，

尽量将需要nodejs和electron能力的抽离到主进程中，

渲染进程通过ipc调用主进程封装好的能力

【总结】

1.非preload的方式使用nodejs和electron能力

2.preload的方式使用nodejs和electron能力

【本文地址】

公司简介

联系我们